<template>
  <div>
    <div class="first-content">
      <div class="pic home-picture" :style="{background: 'url(' +  require('../assets/images/post-bg-universe.jpg') + ')'}">
				<div class="overlay"></div>
				<div class="content">
          <div class="
                article-header
                col-lg-9
                col-md-9
                col-sm-12
                col-xs-12
              ">
            <div class="
                  col-lg-9
                  col-md-9
                  col-sm-12
                  col-xs-12
                ">
              <h1 class="title">{{article.title}}</h1>
              <h4 class="subtitle">{{article.subtitle}}</h4>
            </div>
          </div>
				</div>
			</div>
		</div>
    <div class="container" style="margin-bottom: 20px;">
			<div class="second-section">
				<div class="
              col-lg-8 col-lg-offset-1
              col-md-8 col-md-offset-1
              col-sm-12
              col-xs-12
              bloglist
            ">
					文章内容
				</div>
        <div class="
              col-lg-3 col-lg-offset-0
              col-md-3 col-md-offset-0
              col-sm-12
              col-xs-12
              sidebar-container
            ">
          目录
        </div>
			</div>
		</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tagList: [
        {id: 1, tagName: "Java"},
        {id: 6, tagName: "Shiro"}
      ],
      article: {
        id: 2,
        title: "这是文章的标题",
        subtitle: "副标题",
        content: "一个上进的工程师，总有忙不完的事。除了要把工作做完，做好，还需要不断给自己充电，保证自己始终在有效地学习和成长。尽管如此，我们还是会觉得自己有两个状态：忙的状态，也就是很多外在的期限和需求的时候；以及“不忙”的状态，就是有一堆事情，但是没有哪件事似乎是必须立即执行的时候...",
        createDate: 1637644509000
      }
    }
  }
}
</script>

<style scoped>
.sidebar-container {
  margin-top: 25px;
}
.bloglist {
  padding-top: 30px;
}
.subtitle {
  text-align: left;
  margin-top: 20px;
}
.title {
  text-align: left;
  font-size: max(2em, min(4em, 5vw));
  font-weight: 700 !important;
  letter-spacing: 1px;
}
.article-header {
  float: right;
}
</style>